<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>

</head>
<body>

<h2>Welcome this is the parent</h2>
<h1 id="header">Welcome to Javascript </h1>

<div>

    <ul>
        <li class="red">John</li>
         <div>
             <li class="red">Adam</li>
         </div>
        <li class="blue">Jim</li>
        <li class="red">Sam</li>
        <li class="blue">Brian</li>
        <li class="red">Kyle</li>
        <li class="blue">Ryan</li>
        <li class="blue">Nick</li>
        <li class="red">David</li>
    </ul>
</div>

<!-- How to Add Jquery to Html-->
<!-- Jquery is library written with javascript language -->

<!-- cdn Content Delivery Network -->
<!-- download and adding as external script file -->
<!-- bower  -->
<!-- 1.x and 2.x -->
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.2.js" ></script>
<!-- two versions -->

<!-- 1.11.2 and 2.1.3 -->
<!-- who is writing code for jquery, John Resig , open source , developers -->
<!-- internet explorer -->

<script type="text/javascript">
    // class selector css .
    // id selector #
    // descendent selector, space
    // child selector , >
    // sibling selector, +
    // element selector -- tag

    //$, selector

    //chaining
    //selectors
    //cross browser support issues --


    var firstRedEl =  $('.red').css('background-color','red').hide(2000).show(4000);


  //  traversing the dom,
    // searching the dom and finding elements
    //
    // jquery object //return jquery wrapper object

  //  $('.red').length
    //$('.red')[].style.backgroundColor


    //$('.red')// wrapper jquery object
    //$('.red').eq(0); // native html
    //$('.red')[0]//native html
    //jquery wrapper
    //chaining

 //   $('#header')
             //

    //$ alias name for jquery
    //jQuery
    //$




</script>
</body>
</html>